<template>
    <el-row :gutter="30">
        <el-col :span="18">
            <el-card>
                <template #header>
                    <label class="card-header">{{presentCollector.folderName}}</label>
                </template>
                <el-empty v-if="presentCollector.content.length == 0" description="未找到收藏记录"/>
                <div v-else v-for="(item, index) in presentCollector.content" :key="index">
                    <el-row :gutter="50">
                        <el-col :span="15">
                            <div class="title" @click="toCollection(item.paperId)">
                                {{item.title}}
                            </div>
                            <div style="font-size: 14px; margin: 10px 0 0 10px; ">
                                {{item.author}}
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="collection-operate">
                                <label>收藏日期:</label><br/>
                                <label>{{item.date}}</label>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="collection-operate red">
                                <el-tooltip content="删除该条收藏记录" placement="bottom" effect="light">
                                    <label class="pointer" @click="deleteCollection(index)">删除</label>
                                </el-tooltip>
                            </div>
                        </el-col>
                    </el-row>
                    <el-divider/>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6" style="display: fixed;">
            <el-affix :offset="90" style="width: 90%; ">
                <el-card :body-style="{padding: '20px 0 20px 0'}">
                    <template #header>
                        <label class="card-header">收藏夹列表</label>
                    </template>
                    <div class="box pointer pl-20" @click="plusCollector()">
                        <em class="icon el-icon-circle-plus"/>
                        <span>新建收藏夹</span>
                    </div>
                    <div class="box pointer" :class="presentCollectorIndex == index ? 'activate' : 'box-collector'"
                        @click="selectCollector(index)"
                        v-for="(item, index) in folders" 
                        :key="index">
                        <div class="item">
                            <em class="icon el-icon-files"/>
                            <span style="width: 160px; ">{{item.folderName}}</span>
                            <el-dropdown v-if="item.folderName != '默认收藏夹'">
                                <em class="icon el-icon-more"/>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="editCollector(index)">重命名</el-dropdown-item>
                                        <el-dropdown-item @click="deleteFolder(index)">
                                            <label style="color: red; cursor: pointer; ">删除</label>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </el-card>
            </el-affix>
            
        </el-col>
    </el-row>
</template>

<script>
import axios from "@/utils/MyAxios"
import qs from "qs"
import { ElLoading, ElMessageBox } from 'element-plus'
export default {
    mounted(){
        let user = JSON.parse(localStorage.getItem('user'))
        if (user != null) {
            this.$store.commit('setToken', user.token)
        }
        console.log(this.token)
        this.updateInfo()
    },
    data() {
        return {
            presentCollectorIndex: 0,
            folders: [],
            loading: null
        }
    },
    computed: {
        presentCollector() {
            if (this.folders.length == 0) {
                return {
                    folderName: '默认收藏夹',
                    count: 0,
                    folderId: 0,
                    content: []
                }
            }
            return this.folders.at(this.presentCollectorIndex)
        },
        token() {
            return this.$store.state.user.token
        }
    },
    methods: {
        async updateInfo(){
            this.loading = ElLoading.service({
                lock: true,
                text: 'Loading'
            })
            await axios.post('/api/folder/list', qs.stringify({token: this.token}))
                .then(res => {
                    const data = res.data
                    console.log(res)
                    if (data.code == 0) {
                        data.data.forEach(element => {
                            console.log(element)
                            this.folders.push({
                                folderName: element.folderName,
                                count: element.count,
                                folderId: element.folderId,
                                content: []
                            })
                        })
                    }
                })
            this.fetchList()
        },
        plusCollector() {
            ElMessageBox.prompt('请输入新收藏夹的名称', 'Tip', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                inputPattern: /^.{1,10}$/,
                inputErrorMessage: '收藏夹名称长度应在1~10个字以内',
            })
                .then(({ value }) => {
                    axios.post('/api/folder/add', qs.stringify({token: this.token, folderName: value}))
                        .then(res => {
                            const data = res.data
                            if (data.code == 0) {
                                this.$message.success({message: '新建收藏夹成功', showClose: true})
                                this.folders.push({
                                    folderName: value,
                                    count: 0,
                                    folderId: data.data.folderId,
                                    content: []
                                })
                            } else {
                                this.$message.error({message: res.data.msg, showClose: true})
                            }
                        })
                        .catch(err => {
                            this.$message({message: err.message, showClose: true})
                        })
                })
        },
        selectCollector(index) {
            this.loading = ElLoading.service({
                lock: true,
                text: 'Loading'
            })
            this.presentCollectorIndex = index
            this.fetchList()
        },
        editCollector(index) {
            ElMessageBox.prompt('请输入收藏夹新的名称', 'Tip', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                inputPattern: /^.{1,10}$/,
                inputErrorMessage: '收藏夹名称长度应在1~10个字以内',
            })
                .then(({ value }) => {
                    axios.post('/api/folder/update', qs.stringify({token: this.token, folderId: this.folders.at(index).folderId, folderName: value}))
                        .then((res) => {
                            const data = res.data
                            if (data.code == 0) {
                                this.folders.at(index).folderName = value
                                this.$message.success({message: '修改成功', showClose: true})
                            } else if (data.code == 1) {
                                this.$message.error({message: '与已有收藏夹重名', showClose: true})
                            }
                        })
                })
            console.log(this.folders)
        },
        deleteFolder(index) {
            console.log(this.folders.at(index))
            ElMessageBox.confirm(
                '收藏夹将永久删除. 您继续吗?',
                'Warning',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    axios.post('/api/folder/delete', qs.stringify({token: this.token, folderId: this.folders.at(index).folderId}))
                        .then((res) => {
                            const data = res.data
                            if (data.code == 0) {
                                this.folders.splice(index, 1)
                                this.$message.success({message: '删除成功', showClose: true})
                            } else {
                                this.$message.error({message:data.message, showClose: true})
                            }
                        })
                })
        },
        // TODO: 没有数据, 没有测试
        deleteCollection(index) {
            ElMessageBox.confirm(
                '该条内容将永久删除. 您继续吗?',
                'Warning',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    let formdata = {
                        token: this.token,
                        collectionId: this.presentCollector.content.at(index).collectionId
                    }
                    axios.post('/api/collection/delete', qs.stringify(formdata))
                        .then((res) => {
                            const data = res.data
                            if (data.code == 0) {
                                this.presentCollector.content.splice(index, 1)
                                console.log(this.presentCollector)
                                this.$message.success({message: '删除成功', showClose: true})
                            } else {
                                this.$message.error({message:data.message, showClose: true})
                            }
                        })
                })
        },
        fetchList() {
            axios.post('/api/collection/list', qs.stringify({token: this.token, folderId: this.presentCollector.folderId}))
                .then((res) => {
                    const data = res.data
                    if (data.code == 0) {
                        // TODO: 没有返回作者?
                        this.presentCollector.content = data.data
                        console.log(this.folders)
                    }
                    this.loading.close()
                })
        },
        toCollection(id) {
            const { href } = this.$router.resolve({
                path: '/detail',
                query: {
                    paperId: id
                }
            })
            window.open(href, '_blank')
        }
    }
}
</script>

<style scoped>
.card-header {
    font-size: 25px;
}
.pl-20 {
    padding-left: 20px;
}
.pointer {
    cursor: pointer;
}
.title {
    font-size: 18px;
    cursor: pointer;
    text-decoration: underline;
}
.collection-operate {
    width: 100%;
    height: 100%;
    text-align: center;
}
.red {
    color: red;
}
.box {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
}
.box-collector :hover {
    background-color: #DDDDDD;
}
.activate {
    background-color: #00a1d6;
}
.item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.icon {
    font-size: 20px;
    padding-right: 8px;
}
</style>